<template>
  <div class="main">
    <el-main>
      <div
        style="
          width: 100%;
          min-height: 100%;
          background: #fff;
          margin: -25px auto;
          overflow-y: hidden;
        "
      >
        <div style="margin: 0 auto; width: 920px">
          <el-row>
            <el-col :span="14">
              <div style="padding-bottom: 25px; margin-left: -10px">
                <div
                  style="display: flex; flex-wrap: wrap; width: 700px"
                  v-if="classifies.length > 1"
                >
                  <span
                    class="res-span"
                    :class="[item.selected ? 'res-span-active' : '']"
                    v-for="(item, index) in classifies"
                    :key="index"
                    @click="openResource(item)"
                    >{{ item.name }}</span
                  >
                </div>
                <div :class="[belong === 0 ? 'resBox' : 'resBox-active']">
                  <div
                    class="customBox"
                    :class="[item.selected ? '' : 'res-box']"
                    v-for="(item, index) in sub"
                    :key="index"
                    @click="onChangeType(item)"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <!--搜索一-->
          <div style="margin-left: 8px; margin-top: -25px" v-if="type === 0">
            <span>{{ $t("Info.state") }}</span>
            <el-select
              v-model="value"
              placeholder="全部"
              style="width: 160px; margin-left: 50px"
              @change="select(value)"
            >
              <el-option
                v-for="item2 in options"
                :key="item2.value"
                :label="item2.label"
                :value="item2.value"
              >
              </el-option>
            </el-select>
            <el-input
              placeholder="用户登录账号/订单编号/图书项目"
              clearable
              style="width: 470px; margin-left: 50px"
              v-model="orderNo"
            ></el-input>
            <button class="search" @click="search(orderNo)">
              {{ $t("Info.search") }}
            </button>
          </div>
          <!--搜索二-->
          <div style="margin-left: 8px; margin-top: -25px" v-if="type === 1">
            <span>{{ $t("Info.state") }}</span>
            <el-select
              v-model="value2"
              placeholder="全部"
              style="width: 160px; margin-left: 50px"
              @change="selectCustom(value2)"
            >
              <el-option
                v-for="item3 in options2"
                :key="item3.value2"
                :label="item3.label"
                :value="item3.value2"
              >
              </el-option>
            </el-select>
            <el-input
              placeholder="用户登录账号/订单编号"
              clearable
              style="width: 470px; margin-left: 50px"
              v-model="orderNum"
            ></el-input>
            <button class="search" @click="searchCustom(orderNum)">
              {{ $t("Info.search") }}
            </button>
          </div>
          <!--表格一-->
          <div id="mytable" v-if="type === 0">
            <div>
              <el-table :data="resList" border style="margin: 40px 5px">
                <el-table-column
                  label="序号"
                  width="80"
                  header-align="center"
                  align="center"
                  type="index"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账号"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="orderNo"
                  label="订单编号"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="projectName"
                  label="所关联项目"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="totalAmount"
                  label="订单总额"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="payAmount"
                  label="支付总额"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="createDate"
                  label="生成时间"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="endDate"
                  label="结束时间"
                  width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="status"
                  label="状态"
                  width="90"
                  header-align="center"
                  align="center"
                  :formatter="getMyStatus"
                ></el-table-column>

                <el-table-column
                  label="操作"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="normal"
                      style="padding: 5px"
                      @click="open(scope.row.status, scope.row.orderNo)"
                      >查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: -6px;
                padding-bottom: 50px;
              "
            >
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChange(page)"
                  :current-page.sync="page"
                  layout="prev,pager,next"
                  :page-size="pageSize"
                  :total="total"
                >
                </el-pagination>
              </div>
            </div>
          </div>
          <!--表格二-->
          <div id="mytable2" v-if="type === 1">
            <div>
              <el-table :data="customList" border style="margin: 40px 5px">
                <el-table-column
                  label="序号"
                  width="80"
                  header-align="center"
                  align="center"
                  type="index"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账号"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="orderNo"
                  label="订单编号"
                  width="110"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="totalAmount"
                  label="订单总额"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="payAmount"
                  label="支付总额"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="createDate"
                  label="生成时间"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="completeDate"
                  label="结束时间"
                  width="100"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  class="time"
                  prop="status"
                  label="状态"
                  width="100"
                  header-align="center"
                  align="center"
                  :formatter="getStatus"
                ></el-table-column>

                <el-table-column
                  label="操作"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="normal"
                      style="padding: 5px"
                      @click="showCustom(scope.row.status, scope.row.orderNo)"
                      >查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: -6px;
                padding-bottom: 50px;
              "
            >
              <div class="block">
                <el-pagination
                  @current-change="change(page3)"
                  :current-page.sync="page3"
                  layout="prev,pager,next"
                  :page-size="pageSize"
                  :total="customTotal"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <my-slot
      :myData="myData"
      :resourceTotal="resourceTotal"
      v-on:listenEvent="showMsg"
    ></my-slot>
    <CustomOrder v-on:listenCustom="showCustomMsg"></CustomOrder>
  </div>
</template>

<script>
import MySlot from "../../components/book-order/MySlot";
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import util from "../../common/util";
import CustomOrder from "../../components/custom/CustomOrder";

let userId;
let pressId;
let search;
let status;
let search2;
let status2;
let culture;
let orderType;

export default {
  name: "OrderList",
  components: { MySlot, CustomOrder },
  data() {
    return {
      options: [
        {
          value: "0",
          label: "已完成",
        },
        {
          value: "1",
          label: "待支付",
        },
        {
          value: "2",
          label: "订单取消",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      options2: [
        {
          value2: "0",
          label: "已支付",
        },
        {
          value2: "1",
          label: "待支付",
        },
        {
          value2: "2",
          label: "订单取消",
        },
        {
          value2: "3",
          label: "已完成",
        },
        {
          value2: "",
          label: "全部",
        },
      ],
      value2: "",
      value: "",
      myData: null,
      resourceData: [],
      pageSize: 5,
      resList: [],
      total: 0,
      page: 1,
      orderNo: "",
      resourceTotal: 0,
      customList: [],
      customTotal: 0,
      page3: 1,
      orderNum: "",
      belong: 0,
      classifies: [
        {
          id: 3,
          name: "图书发布订单",
          selected: true,
        },
        {
          id: 2,
          name: "资源购买订单",
          selected: false,
        },
      ],
      sub: [
        {
          id: 2,
          name: "定制资源订单",
          selected: true,
        },
        {
          id: 1,
          name: "基本规格资源订单",
          selected: false,
        },
      ],
      selected:false,
      type: 0,
    };
  },

  created() {
    userId = this.$route.query.userId;
    pressId = this.$route.query.pressId;
    culture = this.$route.query.culture;
    getResources(1, this);
  },
  methods: {
    /**
     * 图书发布订单
     */
    openResource(item) {
      intiTypeDataSelected(this, item);
      if (item.id === 3) {
        status = "-1";
        search = "";
        this.value = "-1";
        getResources(1, this);
        this.type = 0;
      } else {
        orderType = item.id;
        search2 = "";
        status2 = "";
        this.value2 = "";
        getCustom(1, this);
        this.type = 1;
        this.options2 = [
          {
            value2: "0",
            label: "已支付",
          },
          {
            value2: "1",
            label: "待支付",
          },
          {
            value2: "2",
            label: "订单取消",
          },
          {
            value2: "3",
            label: "已完成",
          },
          {
            value2: "",
            label: "全部",
          },
        ];
      }
    },
    /**
     * 资源订单
     */
    onChangeType(item) {
      intiClassifiesSelected(this, item);
      orderType = item.id;
      this.value2 = "";
      this.type = 1;
      if (item.id === 2) {
        search2 = "";
        status2 = "";
        getCustom(1, this);
        this.options2 = [
          {
            value2: "0",
            label: "已支付",
          },
          {
            value2: "1",
            label: "待支付",
          },
          {
            value2: "2",
            label: "订单取消",
          },
          {
            value2: "3",
            label: "已完成",
          },
          {
            value2: "",
            label: "全部",
          },
        ];
      } else {
        search2 = "";
        status2 = "";
        getCustom(1, this);
        this.options2 = [
          {
            value2: "1",
            label: "待支付",
          },
          {
            value2: "2",
            label: "订单取消",
          },
          {
            value2: "3",
            label: "已完成",
          },
          {
            value2: "",
            label: "全部",
          },
        ];
      }
    },
    /**
     * 资源订单取消订单或立即支付后立即刷新订单列表当前页
     */
    showCustomMsg() {
      getCustom(this.page3, this);
    },

    /**
     * 图书发布订单取消订单后立即刷新订单列表当前页
     */
    showMsg() {
      console.log(this.page + "vvvv");
      getResources(this.page, this);
    },

    /**
     * 资源费用虚拟价格计算
     */
    getData() {
      let t = 0;
      if (this.myData.responseAreditorBookOrderDetailList !== null) {
        this.myData.responseAreditorBookOrderDetailList.forEach((el) => {
          if (el.resourceSource !== 3) {
            t += el.resourcePrice;
          }
        });
        this.resourceTotal = t;
      }
    },

    /**
     * 图书发布订单列表时间格式转换
     */
    loadData() {
      for (let i = 0; i < this.resList.length; i++) {
        this.resList[i].createDate = util.formate(this.resList[i].createDate);
        if (this.resList[i].endDate !== null) {
          this.resList[i].endDate = util.formate(this.resList[i].endDate);
        }
      }
    },

    /**
     * 资源订单列表时间格式转换
     */
    loadCustomData() {
      for (let i = 0; i < this.customList.length; i++) {
        this.customList[i].createDate = util.formate(
          this.customList[i].createDate
        );
        if (this.customList[i].completeDate !== null) {
          this.customList[i].completeDate = util.formate(
            this.customList[i].completeDate
          );
        }
      }
    },

    /**
     * 订单详情基本信息时间格式转换
     */
    loadDate() {
      this.myData.createDate = util.formate(this.myData.createDate);
    },

    /**
     * 资源订单状态显示
     */
    getStatus(row, column) {
      if (parseInt(row.status) == 0) {
        return "已支付";
      } else if (parseInt(row.status) == 1) {
        return "待支付";
      } else if (parseInt(row.status) == 2) {
        return "订单取消";
      } else if (parseInt(row.status) == 3) {
        return "已完成";
      }
    },

    /**
     * 图书发布订单状态显示
     */
    getMyStatus(row, column) {
      if (parseInt(row.status) == 0) {
        return "已完成";
      } else if (parseInt(row.status) == 1) {
        return "待支付";
      } else if (parseInt(row.status) == 2) {
        return "订单取消";
      }
    },

    /**
     * 获取图书发布订单搜索框数据
     */
    search(i) {
      status = "";
      search = i;
      this.page = 1;
      getResources(1, this);
    },

    /**
     * 获取图书发布订单下拉框数据
     */
    select(t) {
      search = "";
      status = t;
      this.page = 1;
      getResources(1, this);
    },

    /**
     * 获取资源订单搜索框数据
     */
    searchCustom(m) {
      status2 = "";
      search2 = m;
      this.page3 = 1;
      getCustom(1, this);
    },

    /**
     * 获取资源订单下拉框数据
     */
    selectCustom(n) {
      search2 = "";
      status2 = n;
      this.page3 = 1;
      getCustom(1, this);
    },

    /**
     * 打开图书订单详情页方法
     */
    open(id, id2) {
      let that = this;
      bus.$emit("showClause", id, id2);

      ajax.get({
        url:
          api.orders.routeName +
          api.orders.children.detail +
          id2 +
          "?r=" +
          Math.random(),
        success: function (res) {
          that.myData = res;
          console.log(res);
          that.loadDate();
          if (that.myData.responseAreditorBookOrderDetailList !== null) {
            that.getData();
          } else {
            that.resourceTotal = 0;
          }
        },
        error(e) {
          console.log(e);
        },
      });
    },

    /**
     * 打开资源订单详情
     */
    showCustom(t, m) {
      bus.$emit("showCustomRes", t, m);
    },

    /**
     * 图书发布列表分页
     */
    handleCurrentChange(val) {
      getResources(val, this);
    },

    /**
     * 普通定制资源列表分页
     */
    change(val) {
      getCustom(val, this);
    },
  },
};

/**
 * 获取图书发布表格中的数据方法
 */
function getResources(page, that) {
  ajax.get({
    url: api.orders.routeName + api.orders.children.bookList,
    data: {
      search: search,
      status: status,
      page: page,
      pageSize: 5,
      userId: userId,
      pressId: pressId,
      m: Math.random(),
    },
    success(res) {
      that.resList = res.list;
      that.total = res.total;
      that.page = page;
      that.loadData();
    },
    error(e) {
      console.log(e);
    },
  });
}

/**
 * 获取普通定制资源表格数据
 */
function getCustom(page3, that) {
  ajax.get({
    url: api.customDetail.routeName + api.customDetail.children.detail,
    data: {
      search: search2,
      orderStatus: status2,
      page: page3,
      pageSize: 5,
      userId: userId,
      pressId: pressId,
      orderType: orderType,
      m: Math.random(),
    },
    success(res) {
      console.log(res);
      that.customList = res.list;
      that.customTotal = res.total;
      that.loadCustomData();
      that.page3 = page3;
    },
    error(e) {
      console.log(e);
    },
  });
}

/**
 * 初始化类型选择状态
 *
 * @param that VUE对象
 * @param item 类型对象数据
 */
function intiTypeDataSelected(that, item) {
  that.classifies.forEach((e) => {
    e.selected = false;
  });

  item.selected = true;
  if (item.id === 2) {
    that.belong = 1;
    that.sub.forEach((e) => {
      e.selected = false;
      if (e.id === 2) {
        e.selected = true;
      }
    });
  } else {
    that.belong = 0;
  }
}

/**
 * 初始化类型分类选择状态
 *
 * @param that VUE对象
 * @param item 分类对象数据
 */
function intiClassifiesSelected(that, item) {
  that.sub.forEach((e) => {
    e.selected = false;
  });

  item.selected = true;
}
</script>

<style scoped>
.main {
  min-height: 100%;
  width: 100%;
  background: #eff3f5;
}

.el-main {
  color: #333;
}

.el-aside,
.el-main {
  overflow-y: hidden;
}

.el-row {
  margin: 25px 5px;
}

.search {
  width: 100px;
  height: 40px;
  border: none;
  background: #66b1ff;
  color: white;
  border-radius: 4px;
  margin-left: 20px;
  font-size: 14px;
  letter-spacing: 2px;
}

.search:hover {
  cursor: pointer;
}

.res-span {
  display: inline-block;
  padding: 9px 17px;
  background: #e3e3e3;
  border-radius: 4px 4px 0px 0px;
  font-size: 16px;
  font-weight: bolder;
  color: black;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 15px;
}

.res-span-active {
  background: #9b9b9b;
  color: #ffffff;
}

.resBox {
  display: none;
}

.resBox-active {
  display: flex;
}

.customBox {
  width: 130px;
  height: 30px;
  background: #4381e6;
  margin-left: 15px;
  margin-top: 20px;
  color: white;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}

.customBox:hover {
  cursor: pointer;
}

.res-box {
  background: white;
  color: #666666;
  border: 1px solid #979797;
}

.main {
  margin-top: -40px;
}
</style>
